<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工管理 - 员工列表</title>
    <link rel="stylesheet" href="../../css/style.css">
    <style>
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        .modal-content {
            background-color: #fff;
            margin: auto;
            margin-top: 50px;
            padding: 20px;
            width: 70%;
            max-width: 800px;
            border-radius: 8px;
            position: relative;
        }

        .close-btn {
            position: absolute;
            right: 20px;
            top: 20px;
            font-size: 28px;
            cursor: pointer;
        }

        .detail-container {
            padding: 20px;
        }

        .detail-item {
            display: flex;
            margin-bottom: 15px;
        }

        .detail-label {
            width: 30%;
            font-weight: bold;
            padding-right: 10px;
            text-align: right;
        }

        .detail-value {
            width: 70%;
        }

        .edit-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        .edit-modal-content {
            background-color: #fff;
            margin: auto;
            margin-top: 50px;
            padding: 20px;
            width: 70%;
            max-width: 800px;
            border-radius: 8px;
            position: relative;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }

        .form-group input, .form-group select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }

        .action-buttons {
            margin-top: 20px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="../../js/utils.js"></script>
    <script src="../../js/api.js"></script>
    <script type="module" src="../../js/components/navigation.js"></script>
    <script type="module" src="../../js/jquery-1.8.3.js"></script>
</head>
<body>
<div class="app-container">
    <header class="app-header">
        <div class="logo">员工管理系统</div>
        <div class="user-info">
            <span id="username-display"></span>
            <button id="logout-btn" class="btn btn-secondary">退出登录</button>
        </div>
    </header>

    <div class="app-body">
        <aside class="sidebar">
            <nav class="menu">
                <ul>
                    <li><a href="#" class="menu-item active" data-target="welcome">欢迎页</a></li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">员工管理</a>
                        <ul class="submenu">
                            <li><a href="../employee/list.html" class="submenu-item">员工列表</a></li>
                            <li><a href="../employee/add.html" class="submenu-item">添加员工</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">业务管理</a>
                        <ul class="submenu">
                            <li><a href="../business/list.html" class="submenu-item">业务列表</a></li>
                            <li><a href="../business/create.html" class="submenu-item">创建业务</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">薪酬管理</a>
                        <ul class="submenu">
                            <li><a href="../salary/overview.html" class="submenu-item">薪酬概览</a></li>
                            <li><a href="../salary/manage.html" class="submenu-item">薪酬管理</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">系统设置</a>
                        <ul class="submenu">
                            <li><a href="../system/user.html" class="submenu-item">用户管理</a></li>
                            <li><a href="../system/profile.html" class="submenu-item">个人设置</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </aside>

        <main class="content">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">员工列表</h2>
                    <a href="add.html" class="btn btn-primary">添加员工</a>
                </div>
                <div class="search-container">
                    <input type="text" id="search-input" class="search-input" placeholder="请输入员工姓名或部门">
                    <button id="search-btn" class="search-btn">搜索</button>
                </div>
                <div class="table-container">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>职位</th>
                            <th>部门</th>
                            <th>入职日期</th>
                            <th>薪资</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="employee-table-body">
                        <!-- 员工数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
                <div class="pagination">
                    <span class="pagination-item">上一页</span>
                    <span class="pagination-item active">1</span>
                    <span class="pagination-item">2</span>
                    <span class="pagination-item">3</span>
                    <span class="pagination-item">下一页</span>
                </div>
            </div>
        </main>
    </div>
</div>

<script>
    $(document).ready(function () {
        // 模态框相关元素
        const modal = $('#detail-modal');
        const modalDetail = $('#modal-employee-detail');
        const editModal = $('#edit-modal');
        const editForm = $('#edit-employee-form');
        const closeBtn = $('.close-btn');
        const cancelEditBtn = $('.cancel-edit-btn');

        // 关闭模态框
        closeBtn.click(function () {
            modal.hide();
            editModal.hide();
        });
        $(window).click(function (e) {
            if (e.target === modal[0]) modal.hide();
            if (e.target === editModal[0]) editModal.hide();
        });

        // 取消编辑按钮点击事件
        cancelEditBtn.click(function () {
            editModal.hide();
        });

        // 编辑按钮点击事件
        $(document).on('click', '.edit-btn', function () {
            const id = $(this).data('id');
            loadEmployeeForEdit(id);
        });

        // 加载员工数据到编辑表单
        function loadEmployeeForEdit(id) {
            // 显示加载中
            editForm.html('<div style="text-align: center; padding: 40px;"><i class="fas fa-spinner fa-spin fa-3x"></i><p style="margin-top: 15px;">正在加载员工数据...</p></div>');
            editModal.show();

            // 模拟数据
            const employee = {
                id: id,
                name: '张三',
                age: 30,
                position: '高级前端工程师',
                department: '技术部',
                hireDate: '2020-01-15',
                salary: 15000,
                phone: '13800138000',
                email: 'zhangsan@example.com'
            };

            // 模拟API延迟
            setTimeout(() => {
                // 恢复表单HTML
                const formHTML = `
      <input type="hidden" id="edit-employee-id" name="id" value="${employee.id}">
      <div class="form-group">
        <label for="edit-name">姓名 <span style="color: red;">*</span></label>
        <input type="text" id="edit-name" name="name" placeholder="请输入姓名" value="${employee.name}">
      </div>
      <div class="form-group">
        <label for="edit-age">年龄 <span style="color: red;">*</span></label>
        <input type="number" id="edit-age" name="age" placeholder="请输入年龄" value="${employee.age}">
      </div>
      <div class="form-group">
        <label for="edit-position">职位 <span style="color: red;">*</span></label>
        <input type="text" id="edit-position" name="position" placeholder="请输入职位" value="${employee.position}">
      </div>
      <div class="form-group">
        <label for="edit-department">部门 <span style="color: red;">*</span></label>
        <select id="edit-department" name="department">
          <option value="">请选择部门</option>
          <option value="技术部" ${employee.department === '技术部' ? 'selected' : ''}>技术部</option>
          <option value="市场部" ${employee.department === '市场部' ? 'selected' : ''}>市场部</option>
          <option value="人事部" ${employee.department === '人事部' ? 'selected' : ''}>人事部</option>
          <option value="销售部" ${employee.department === '销售部' ? 'selected' : ''}>销售部</option>
          <option value="财务部" ${employee.department === '财务部' ? 'selected' : ''}>财务部</option>
        </select>
      </div>
      <div class="form-group">
        <label for="edit-hireDate">入职日期 <span style="color: red;">*</span></label>
        <input type="date" id="edit-hireDate" name="hireDate" value="${employee.hireDate}">
      </div>
      <div class="form-group">
        <label for="edit-salary">薪资 <span style="color: red;">*</span></label>
        <input type="number" id="edit-salary" name="salary" placeholder="请输入薪资" step="0.01" value="${employee.salary}">
      </div>
      <div class="form-group">
        <label for="edit-phone">手机号码</label>
        <input type="text" id="edit-phone" name="phone" placeholder="请输入手机号码" value="${employee.phone}">
      </div>
      <div class="form-group">
        <label for="edit-email">电子邮箱</label>
        <input type="email" id="edit-email" name="email" placeholder="请输入电子邮箱" value="${employee.email}">
      </div>
      <div class="action-buttons">
        <button type="submit" class="btn btn-primary">保存</button>
        <button type="button" class="btn btn-secondary cancel-edit-btn">取消</button>
      </div>
    `;
                editForm.html(formHTML);
            }, 800);
        }

        // 编辑表单提交事件
        editForm.submit(function (e) {
            e.preventDefault();

            // 表单验证
            const name = $('#edit-name').val().trim();
            const age = $('#edit-age').val().trim();
            const position = $('#edit-position').val().trim();
            const department = $('#edit-department').val().trim();
            const hireDate = $('#edit-hireDate').val().trim();
            const salary = $('#edit-salary').val().trim();

            if (!name || !age || !position || !department || !hireDate || !salary) {
                alert('请填写所有必填字段');
                return;
            }

            // 模拟API提交
            setTimeout(() => {
                alert('员工信息更新成功');
                editModal.hide();
                loadEmployeeList(); // 更新列表数据
            }, 800);
        });

        // 查看详情按钮点击事件
        $(document).on('click', '.view-detail-btn', function () {
            const id = $(this).data('id');
            showEmployeeDetail(id);
        });

        function showEmployeeDetail(id) {
            // 显示加载中
            modalDetail.html('<div style="text-align: center; padding: 40px;"><i class="fas fa-spinner fa-spin fa-3x"></i><p style="margin-top: 15px;">正在加载员工详情...</p></div>');
            modal.show();

            // 模拟数据
            const employee = {
                id: id,
                name: '张三',
                age: 30,
                position: '高级前端工程师',
                department: '技术部',
                hireDate: '2020-01-15',
                salary: 15000,
                phone: '13800138000',
                email: 'zhangsan@example.com'
            };

            /* 查看 */
            // 模拟API延迟
            setTimeout(() => {
                let detailHTML = `
        <div class="detail-item"><div class="detail-label">ID</div><div class="detail-value">${employee.id}</div></div>
        <div class="detail-item"><div class="detail-label">姓名</div><div class="detail-value">${employee.name}</div></div>
        <div class="detail-item"><div class="detail-label">年龄</div><div class="detail-value">${employee.age}岁</div></div>
        <div class="detail-item"><div class="detail-label">职位</div><div class="detail-value">${employee.position}</div></div>
        <div class="detail-item"><div class="detail-label">部门</div><div class="detail-value">${employee.department}</div></div>
        <div class="detail-item"><div class="detail-label">入职日期</div><div class="detail-value">${Formatter.formatDate(employee.hireDate)}</div></div>
        <div class="detail-item"><div class="detail-label">薪资</div><div class="detail-value">${Formatter.formatMoney(employee.salary)}</div></div>
        <div class="detail-item"><div class="detail-label">手机号码</div><div class="detail-value">${employee.phone ? `<a href="tel:${employee.phone}">${employee.phone}</a>` : '未提供'}</div></div>
        <div class="detail-item"><div class="detail-label">电子邮箱</div><div class="detail-value">${employee.email ? `<a href="mailto:${employee.email}">${employee.email}</a>` : '未提供'}</div></div>
      `;
                modalDetail.html(detailHTML);
                $('#modal-employee-name').text(`${employee.name} - 员工详情`);
            }, 800);
        };

        // 检查登录状态
        checkLoginStatus();

        // 显示用户名
        const username = localStorage.getItem('username');
        if (username) {
            $('#username-display').text(username);
        }

        // 退出登录
        $('#logout-btn').click(function () {
            localStorage.removeItem('token');
            localStorage.removeItem('username');
            window.location.href = '../../index.html';
        });

        // 加载员工列表
        loadEmployeeList();

        // 搜索按钮点击事件
        $('#search-btn').click(function () {
            loadEmployeeList();
        });

        // 按下回车键搜索
        $('#search-input').keypress(function (e) {
            if (e.which === 13) {
                loadEmployeeList();
            }
        });

        function checkLoginStatus() {
            const token = localStorage.getItem('token');
            if (!token) {
                window.location.href = '../../index.html';
            }
        }

        function loadEmployeeList() {
            const searchKeyword = $('#search-input').val().trim();

            // 显示加载中
            $('#employee-table-body').html('<tr><td colspan="8" style="text-align: center;">加载中...</td></tr>');

            // 调用API获取员工列表
            window.api.employee.getList({keyword: searchKeyword})
                .then(data => {
                    // 清空表格
                    $('#employee-table-body').empty();

                    // 检查数据
                    if (!data || !data.data || data.data.length === 0) {
                        $('#employee-table-body').html('<tr><td colspan="8" style="text-align: center;">暂无数据</td></tr>');
                        return;
                    }

                    // 填充表格
                    data.data.forEach(employee => {
                        const row = $('<tr></tr>');
                        row.append(`<td>${employee.id}</td>`);
                        row.append(`<td>${employee.name}</td>`);
                        row.append(`<td>${employee.age}</td>`);
                        row.append(`<td>${employee.position}</td>`);
                        row.append(`<td>${employee.department}</td>`);
                        row.append(`<td>${Formatter.formatDate(employee.hireDate)}</td>`);
                        row.append(`<td>${Formatter.formatMoney(employee.salary)}</td>`);
                        row.append(`
                                <td>
                                    <button class="btn btn-secondary view-detail-btn" data-id="${employee.id}">查看</button>
                                    <button class="btn btn-primary edit-btn" data-id="${employee.id}">编辑</button>
                                    <button class="btn btn-danger delete-btn" data-id="${employee.id}">删除</button>
                                </td>
                            `);
                        $('#employee-table-body').append(row);
                    });

                    // 绑定删除按钮事件
                    $('.delete-btn').click(function () {
                        const id = $(this).data('id');
                        if (confirm('确定要删除该员工吗？')) {
                            deleteEmployee(id);
                        }
                    });
                })
                .catch(error => {
                    console.error('Failed to load employee list:', error);
                    $('#employee-table-body').html('<tr><td colspan="8" style="text-align: center;">加载失败，请重试</td></tr>');
                });
        }

        function deleteEmployee(id) {
            window.api.employee.delete(id)
                .then(response => {
                    if (response && response.success) {
                        alert('删除成功');
                        loadEmployeeList(); // 重新加载列表
                    } else {
                        alert('删除失败');
                    }
                })
                .catch(error => {
                    console.error('Failed to delete employee:', error);
                    alert('删除失败，请重试');
                });
        }
    });
</script>
<!-- 员工编辑模态框 -->
<div id="edit-modal" class="edit-modal">
    <div class="edit-modal-content">
        <span class="close-btn">&times;</span>
        <div class="form-container">
            <h2 class="form-title">编辑员工</h2>
            <form id="edit-employee-form">
                <input type="hidden" id="edit-employee-id" name="id">
                <div class="form-group">
                    <label for="edit-name">姓名 <span style="color: red;">*</span></label>
                    <input type="text" id="edit-name" name="name" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label for="edit-age">年龄 <span style="color: red;">*</span></label>
                    <input type="number" id="edit-age" name="age" placeholder="请输入年龄">
                </div>
                <div class="form-group">
                    <label for="edit-position">职位 <span style="color: red;">*</span></label>
                    <input type="text" id="edit-position" name="position" placeholder="请输入职位">
                </div>
                <div class="form-group">
                    <label for="edit-department">部门 <span style="color: red;">*</span></label>
                    <select id="edit-department" name="department">
                        <option value="">请选择部门</option>
                        <option value="技术部">技术部</option>
                        <option value="市场部">市场部</option>
                        <option value="人事部">人事部</option>
                        <option value="销售部">销售部</option>
                        <option value="财务部">财务部</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="edit-hireDate">入职日期 <span style="color: red;">*</span></label>
                    <input type="date" id="edit-hireDate" name="hireDate">
                </div>
                <div class="form-group">
                    <label for="edit-salary">薪资 <span style="color: red;">*</span></label>
                    <input type="number" id="edit-salary" name="salary" placeholder="请输入薪资" step="0.01">
                </div>
                <div class="form-group">
                    <label for="edit-phone">手机号码</label>
                    <input type="text" id="edit-phone" name="phone" placeholder="请输入手机号码">
                </div>
                <div class="form-group">
                    <label for="edit-email">电子邮箱</label>
                    <input type="email" id="edit-email" name="email" placeholder="请输入电子邮箱">
                </div>
                <div class="action-buttons">
                    <button type="submit" class="btn btn-primary">保存</button>
                    <button type="button" class="btn btn-secondary cancel-edit-btn">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 员工详情模态框 -->
<div id="detail-modal" class="modal">
    <div class="modal-content">
        <span class="close-btn">&times;</span>
        <div class="card-header">
            <h2 class="card-title" id="modal-employee-name">员工详情</h2>
        </div>
        <div class="detail-container" id="modal-employee-detail"></div>
    </div>
</div>

</body>
</html>